import React, { Component } from 'react'

// 返回顶部按钮
class BackTop extends Component {

    constructor(props, context) {
        super(props, context);
        this.handleClick = this.handleClick.bind(this)
        this.state = {
            hidden: true,
        }
        this.left = document.documentElement.clientWidth - 55
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.hidden !== this.state.hidden) {
            this.setState({
                hidden: nextProps.hidden
            });
        }
    }

    handleClick() {
        this.props.handleClick()
    }

    render() {
        let style_root = {
            position: 'fixed',
            textAlign: 'center',
            top: 10,
            width: 40,
            height: 40,
            marginTop: 10,
            marginLeft: this.left,
            backgroundColor: '#424242',
            opacity: 0.7,
            borderRadius: "5px",
            color: '#ffffff',
            fontSize: 11,
            padding: 7,
            zIndex: 100,
            visibility: this.state.hidden ? "hidden" : "visible",
            lineHeight: 1.2,
        }
        return (
            <div style={style_root} onClick={this.handleClick}>
                <span style={{ marginTop: 2, paddingBottom: 0, marginBottom: 0 }}>返回</span>
                <span style={{ paddingBottom: 2, marginTop: 0 }}>顶部</span>
            </div >

        );
    }
}
export default BackTop;